<template>
  <div
    v-if="course"
    class="course-header container d-flex align-items-center py-4"
  >
    <!-- 封面图 -->
    <img
      class="course-cover"
      src="https://spoc.buaa.edu.cn/inco-filesystem/fileManagerSystem/getFileStream?scjlid=1981389556AF1337E0630211FE0A6CEE"
      alt="课程封面"
    >

    <!-- 文本信息 -->
    <div class="ml-4 info">
      <h1 class="course-title">
        {{ course.courseName }}
      </h1>
      <div class="text-muted mt-2">
        <i class="fas fa-user mr-1" /> 教师：{{ teacherNames.join(', ') || '李老师' }}
        <span class="ml-3">课程ID：{{ course.courseId }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  course: Object
});
const teacherNames = ref([])

import { onMounted, ref } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'

const route = useRoute()
const courseId = route.params.id
onMounted(async () => {
  try {
    const res = await axios.get(`/api/courses/${courseId}/teachers`)
    teacherNames.value = res.data.data || []
  } catch (err) {
    console.error('获取课程教师失败:', err)
  }
})

</script>

<style scoped>
.container {
  width:80vw;
}
.course-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.course-cover {
  width: 220px;
  height: 160px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-title {
  font-size: 35px;
  font-weight: 900;
  color: #003366;
}

.text-muted {
  font-size: 16px;
  color: #666;
}

.info {
  flex: 1;
  text-align: left; /* 确保文字左对齐 */
}
</style>
